<template>
  <yt-page :title="title" class="suggestion driverPage" :scroll="true">
    <yt-textarea title="问题和意见" type="column" v-model="suggeInfo.suggestion" :max="100" showCount></yt-textarea>
    <yt-split></yt-split>
    <yt-card title="图片(选填，提供问题图片)" :tag="false" style="font-size: 14px;">
      <yt-file v-model="suggeInfo.pics" :uploadFile="uploadFile"></yt-file>
    </yt-card>
    <yt-split></yt-split>
    <yt-cell label="联系电话" border="none">
      <yt-input v-model="suggeInfo.telephone" placeholder="选填，便于我们与你联系"></yt-input>
    </yt-cell>
    <yt-split :size="10"></yt-split>
    <yt-btn theme="blue" @click="submitSugge">提交</yt-btn>
    <yt-popup pos="center" v-model="center" fixed>
      <p class="centerTitle"><i :class="['iconfont',flag ? 'icon-tool' :'icon-success', flag ? 'red' : 'blue']"></i><br />{{centerMsg}}</p>
    </yt-popup>
  </yt-page>
</template>

<script>
import { GetStore } from "@/store";
import { commonApi } from '@/common/api/commonApi.js'

export default {
  name: 'driver-complaintsSugge',
  data() {
    return {
      title: this.$route.name,
      suggeInfo: {
        suggestion: '',
        pics: [],
        telephone: '',
        user: null
      },
      uploadFile: async (file) => {
        let { _name: name, _url: url } = await Api.uploadFile(file)
        return { name, url }
      },
      flag: true,
      center: false,
      centerMsg: ''
    }
  },
  methods: {
    submitSugge() {
      let currentUser = GetStore(Store.User)
      this.suggeInfo.user = Api.createInstance(Collection.User, currentUser.id)
      if (this.suggeInfo.suggestion.length > 0) {
        this.center = true
        Api.save(Collection.taxiSuggestion, this.suggeInfo).then(res => {
          this.flag = false
          this.centerMsg = "投诉建议信息提交成功！"
          setTimeout(() => {
            this.suggeInfo = {
              suggestion: '',
              pics: [],
              telephone: '',
              user: null
            }
            this.center = false
            this.$router.$back()
          }, 1000)
        }).catch(err => {
          this.$Toast(err || '提交失败！', 'error')
        })
      } else {
        this.flag = true
        this.center = true
        this.centerMsg = "问题和意见信息不能为空！"
        setTimeout(() => {
          this.center = false
        }, 1000)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.suggestion {
  .yt-textArea-title {
    background-color: #fefefe;
  }
}

.centerTitle {
  margin: 40px 0 10px;
  font-size: 16px;
  color: #333333;
  text-align: center;
  line-height: 45px;

  i {
    font-size: 80px;
    margin-bottom: 16px;
  }
}

.red {
  color: #ff0000;
}

.blue {
  color: #46baff;
}
</style>
